<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
        
        // function wh2107(data){
        //     console.log(data)
        // }

        // 如何封装jsonp 
        // 1. 动态的创建一个 script => 放到页面内 
        // var jdsrc = "https://floor.jd.com/user-v20/feed/get?page=2&pagesize=25&area=1_72_55653_0&source=pc-home&callback=wh2107&_=1624690491233"
        // var script = document.createElement("script");
        // script.src = jdsrc;

        // document.body.appendChild(script);
        
        // // script 等待加载完毕再去执行  这个函数 
        // // onload (window img link script )
        // script.onload = function(){
        //     console.log("JSonp 加载完毕")
        //     script.remove()
        // }
            
        var jdsrc = "https://floor.jd.com/user-v20/feed/get";
        // jsonp(jdsrc,{
        //     page:1,
        //     pagesize:25,
        //     area:"1_72_55653_0",
        //     source:"pc-home",
        // },"callback","getdata")
        
        // jsonp key
        // jsonpcallback  value 函数名称 

        jsonp({
            url:jdsrc,
            data:{
                page:1,
                pagesize:25,
                area:"1_72_55653_0",
                source:"pc-home",
            },
            jsonp:"callback",
            jsonpcallback:"getdata"
        })
        .then(res=>{  // 执行 成功结果  
            console.log("请求Success",res)
        })

        // Promies 封装 
        function jsonp(options){
            var {url,data="",jsonp="callback",jsonpcallback="fn"} = options;

            return new Promise((resolve,reject)=>{
                 // 1. 动态的创建一个 script => 放到页面内 
                var script = document.createElement("script");
                if(data instanceof Object){    // 如果参数数据是对象  就需要把对象拼接成字符串 
                    var str = "";
                    for(var key in data){
                        str += key+"="+data[key] + "&";
                    }
                    data = str.substring(0,str.length-1);
                }

                // 得到JSONP 接口的结果 
                window[jsonpcallback] = function(result){
                    // console.log("请求成功",result)
                    resolve(result)   // 成功的回调 
                }   

                
                script.src = `${url}?${data}&${jsonp}=${jsonpcallback}`;

                document.body.appendChild(script);
                script.onload = function(){
                    console.log("JSonp 加载完毕")
                    script.remove()
                }
            })
           
        }
    </script>
</body>
</html>